<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <!-- <dv-loading v-if="loading">Loading...</dv-loading> -->
      <!-- <div v-else> -->
      <div class="host-body">
        <div class="body-box">
          <!-- 第一行数据 -->
          <div
            class="content-box"
            style="grid-template-columns: 3fr 3fr 3fr; height: 2rem"
          >
            <dv-border-box-1
              ><div style="margin-top: 25px" class="text-box">垃圾房数：25</div>
              <div class="text-box">兑换机数：25</div>
              <div class="text-box">分类桶数：83</div></dv-border-box-1
            >
            <dv-border-box-1
              ><div style="margin-top: 35px" class="text-box">
                投递人次数：2385
              </div>
              <div id="TotalWeight" class="text-box">累计称重：0</div>
            </dv-border-box-1>
            <dv-border-box-1
              ><div id="TotalPoints" style="margin-top: 25px" class="text-box">
                已用积分：0
              </div>
              <div id="ConsumePoints" class="text-box">剩余积分：0</div>
              <div id="SurplusPoints" class="text-box">
                剩余积分：0
              </div></dv-border-box-1
            >
          </div>
          <div
            class="content-box"
            style="
              grid-template-columns: 5fr 5fr;
              height: 5rem;
              margin-bottom: 30px;
            "
          >
            <div class="item-box">
              <div class="d-flex">居民称重信息列表</div>
              <!-- <dv-border-box-7> -->
              <dv-scroll-board :config="configTableScrollExchangeInfo" />
              <!-- </dv-border-box-7> -->
            </div>
            <div class="item-box">
              <div class="d-flex">居民消费积分、兑换商品明细信息列表</div>
              <!-- <dv-border-box-7> -->
              <dv-scroll-board :config="configTableScrollWeightHistory" />
              <!-- </dv-border-box-7> -->
            </div>
          </div>
          <!-- 第二行数据 -->
          <div class="content-box" style="grid-template-columns: 5fr 2fr 3fr;
              height: 5rem;">
            <div class="item-box">
              <div class="d-flex">任务完成排行榜</div>
              <!-- <dv-border-box-7> -->
              <dv-scroll-board :config="configTableScrollIntegral" />
              <!-- </dv-border-box-7> -->
            </div>

            <div class="item-box">
              <div class="d-flex">任务完成排行榜</div>
              <!-- <dv-border-box-7> -->
              <dv-scroll-board :config="configTableScrollWeightOrderByType" />
              <!-- </dv-border-box-7> -->
            </div>

            <div class="item-box">
              <div class="d-flex">任务完成排行榜</div>
              <!-- <dv-border-box-7> -->
              <dv-scroll-board :config="configTableScrollBinAlarm" />
              <!-- </dv-border-box-7> -->
            </div>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import { formatTime } from '@/utils/index.js'
// import centerLeft1 from "./centerLeft1";//文件名
// import centerLeft2 from "./centerLeft2";
// import centerRight1 from "../centerRight1";
// import centerChart from "@/components/echart/center/centerChartRate";
// import centerRight2 from "./centerRight2";
// import center from "./center";
// import bottomLeft from "./bottomLeft";
// import bottomRight from "./bottomRight";
export default {
  data () {
    return {
      configTableScrollWeightHistory: {},
      configTableScrollIntegral: {},
      configTableScrollExchangeInfo: {},
      configTableScrollWeightOrderByType: {},
      configTableScrollBinAlarm: {},
      config: {
        header: ["居民姓名", "类型", "称重"],
        data: [],
        rowNum: 5, //表格行数
        headerHeight: 50,
        columnHeight: 35,
        headerBGC: "#0f1325", //表头
        oddRowBGC: "#0f1325", //奇数行
        evenRowBGC: "#171c33", //偶数行
        index: true,
        columnWidth: [100],
        align: ["center"]
      },
      dataShow: {

      }
    };
  },
  components: {
    // centerLeft1,
    // centerLeft2,
    // centerRight1,
    // centerChart
    // centerRight2,
    // center,
    // bottomLeft,
    // bottomRight
  },
  mounted () {
    this.getDataTableScrollIntegral()
    this.getDataTableScrollExchangeInfo()
    this.getDataTableScrollWeightHistory();
    this.getDataTableScrollWeightOrderByType();
    this.getDataTableScrollBinAlarm()
    // this.timeFn();
    // this.cancelLoading();
  },
  methods: {
    //获取数据-轮播表-各垃圾类型累计投放量排行
    async getDataTableScrollWeightOrderByType () {
      const _self = this;
      this.configTableScrollWeightOrderByType = Object.assign({}, _self.config);
      this.configTableScrollWeightOrderByType.header = ["垃圾类型", "累计投放量"]
      // var url = 'http://111.160.78.62:5575/GarbagePointsTYApi/Integral/GetExchangeAppointmentEchartsList'
      // this.$axios.get(url, {
      // })
      //   .then(function (response) {
      //     console.log(response.data);
      var response = { data: [{ "RUBBISH_ID": 29, "RUBBISH_NAME": "其他垃圾", "TYPE_ID": 4, "WEIGHT": 211.184 }, { "RUBBISH_ID": 27, "RUBBISH_NAME": "厨余垃圾", "TYPE_ID": 2, "WEIGHT": 201.68 }, { "RUBBISH_ID": 26, "RUBBISH_NAME": "可回收垃圾", "TYPE_ID": 1, "WEIGHT": 195.728 }, { "RUBBISH_ID": 28, "RUBBISH_NAME": "有害垃圾", "TYPE_ID": 3, "WEIGHT": 40.0 }, { "RUBBISH_ID": 1, "RUBBISH_NAME": "纸张", "TYPE_ID": 1, "WEIGHT": 0.0 }, { "RUBBISH_ID": 2, "RUBBISH_NAME": "玻璃", "TYPE_ID": 1, "WEIGHT": 0.0 }] }
      var arrayResponse = [];
      var tw = 0;
      response.data.forEach(element => {
        if (element.RUBBISH_ID == 26 || element.RUBBISH_ID == 27 || element.RUBBISH_ID == 28 || element.RUBBISH_ID == 29)
          arrayResponse.push([element.RUBBISH_NAME, element.WEIGHT])
        tw += element.WEIGHT;
      });
      _self.configTableScrollWeightOrderByType.data = arrayResponse;
      _self.configTableScrollWeightOrderByType = { ..._self.configTableScrollWeightOrderByType }

      setTimeout(function () {
        document.getElementById('TotalWeight').innerHTML = '累计称重：' + tw.toFixed(0);
      }, 1000);

    },
    //获取数据-轮播表-小区积分
    async getDataTableScrollIntegral () {
      const _self = this;
      this.configTableScrollIntegral = Object.assign({}, _self.config);
      this.configTableScrollIntegral.header = ["小区名称", "累计积分", "消费积分", "剩余积分"]
      var url = 'http://111.160.78.62:5575/GarbagePointsTYApi/Integral/GetVillageIntegralListApi'
      this.$axios.get(url, {
        params: {
          ClientNo: 0
        }
      })
        .then(function (response) {
          console.log(response.data);
          var arrayResponse = []
          var tp = 0, cp = 0, sp = 0;
          response.data.forEach(element => {
            arrayResponse.push([element.VILLAGE_NAME, element.TotalPoints, element.ConsumePoints, (element.TotalPoints - element.ConsumePoints)])
            tp += element.TotalPoints;
            cp += element.ConsumePoints;
            sp += (element.TotalPoints - element.ConsumePoints);
          });

          _self.configTableScrollIntegral.data = arrayResponse;
          _self.configTableScrollIntegral = { ..._self.configTableScrollIntegral }

          setTimeout(function () {
            document.getElementById("TotalPoints").innerHTML = '累计积分：' + tp.toFixed(0);
            document.getElementById("ConsumePoints").innerHTML = '消费积分：' + cp.toFixed(0);
            document.getElementById("SurplusPoints").innerHTML = '剩余积分：' + sp.toFixed(0);
          }, 1000);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //获取数据-轮播表-居民消费积分、兑换商品明细
    async getDataTableScrollExchangeInfo () {
      const _self = this;
      this.configTableScrollExchangeInfo = Object.assign({}, _self.config);
      this.configTableScrollExchangeInfo.header = ["居民姓名", "兑换商品名称", "兑换商品数量", "消费积分"/*, "兑换日期"*/]
      // this.configTableScrollExchangeInfo.rowNum = 6
      // var url = 'http://111.160.78.62:5575/GarbagePointsTYApi/Integral/GetExchangeAppointmentEchartsList'
      // this.$axios.get(url, {
      // })
      //   .then(function (response) {
      //     console.log(response.data);
      var response = { data: [{ "E_ID": 26, "VID": 3, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-31T11:07:56.643", "EX_POINTS": 50.0, "EX_COUNT": 2, "EX_RULE_ID": "7", "Name": "第一鞋厂", "EX_NAME": "抹布", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 1 }, { "E_ID": 25, "VID": 3, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-31T11:07:56.64", "EX_POINTS": 20.0, "EX_COUNT": 2, "EX_RULE_ID": "4", "Name": "第一鞋厂", "EX_NAME": "洗碗刷", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 1 }, { "E_ID": 24, "VID": 2, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-26T16:17:09.27", "EX_POINTS": 120.0, "EX_COUNT": 1, "EX_RULE_ID": "6", "Name": "马俊娟", "EX_NAME": "可乐", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 2 }, { "E_ID": 23, "VID": 2, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-26T15:45:20.497", "EX_POINTS": 200.0, "EX_COUNT": 1, "EX_RULE_ID": "2", "Name": "马俊娟", "EX_NAME": "拖把", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 2 }, { "E_ID": 22, "VID": 2, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-26T15:00:38.007", "EX_POINTS": 200.0, "EX_COUNT": 1, "EX_RULE_ID": "2", "Name": "马俊娟", "EX_NAME": "拖把", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 2 }, { "E_ID": 21, "VID": 2, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-26T10:22:16.85", "EX_POINTS": 20.0, "EX_COUNT": 1, "EX_RULE_ID": "4", "Name": "马俊娟", "EX_NAME": "洗碗刷", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 1 }, { "E_ID": 20, "VID": 2, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-26T10:18:53.97", "EX_POINTS": 100.0, "EX_COUNT": 1, "EX_RULE_ID": "9", "Name": "马俊娟", "EX_NAME": "薯片", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 1 }, { "E_ID": 19, "VID": 2, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-26T10:18:53.967", "EX_POINTS": 50.0, "EX_COUNT": 2, "EX_RULE_ID": "7", "Name": "马俊娟", "EX_NAME": "抹布", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 1 }, { "E_ID": 17, "VID": 2, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-26T10:01:19.91", "EX_POINTS": 200.0, "EX_COUNT": 1, "EX_RULE_ID": "2", "Name": "马俊娟", "EX_NAME": "拖把", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 2 }, { "E_ID": 18, "VID": 2, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-26T10:01:19.91", "EX_POINTS": 50.0, "EX_COUNT": 1, "EX_RULE_ID": "8", "Name": "马俊娟", "EX_NAME": "雪碧", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 1 }, { "E_ID": 16, "VID": 2, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-26T09:57:49.493", "EX_POINTS": 20.0, "EX_COUNT": 1, "EX_RULE_ID": "4", "Name": "马俊娟", "EX_NAME": "洗碗刷", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 2 }, { "E_ID": 15, "VID": 2, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-25T17:33:42.73", "EX_POINTS": 100.0, "EX_COUNT": 1, "EX_RULE_ID": "9", "Name": "马俊娟", "EX_NAME": "薯片", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 2 }, { "E_ID": 14, "VID": 3, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-25T17:33:42.727", "EX_POINTS": 200.0, "EX_COUNT": 2, "EX_RULE_ID": "2", "Name": "第一鞋厂", "EX_NAME": "拖把", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 1 }, { "E_ID": 12, "VID": 2, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-25T16:14:25.213", "EX_POINTS": 50.0, "EX_COUNT": 2, "EX_RULE_ID": "7", "Name": "马俊娟", "EX_NAME": "抹布", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 1 }, { "E_ID": 13, "VID": 2, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-25T16:14:25.213", "EX_POINTS": 100.0, "EX_COUNT": 1, "EX_RULE_ID": "9", "Name": "马俊娟", "EX_NAME": "薯片", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 2 }, { "E_ID": 10, "VID": 2, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-25T16:11:39.42", "EX_POINTS": 50.0, "EX_COUNT": 2, "EX_RULE_ID": "7", "Name": "马俊娟", "EX_NAME": "抹布", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 2 }, { "E_ID": 11, "VID": 2, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-25T16:11:39.42", "EX_POINTS": 120.0, "EX_COUNT": 1, "EX_RULE_ID": "6", "Name": "马俊娟", "EX_NAME": "可乐", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 2 }, { "E_ID": 8, "VID": 2, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-25T13:48:39.117", "EX_POINTS": 200.0, "EX_COUNT": 1, "EX_RULE_ID": "2", "Name": "马俊娟", "EX_NAME": "拖把", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 1 }, { "E_ID": 9, "VID": 2, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-25T13:48:39.117", "EX_POINTS": 150.0, "EX_COUNT": 1, "EX_RULE_ID": "3", "Name": "马俊娟", "EX_NAME": "毛巾", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 2 }, { "E_ID": 7, "VID": 13, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-24T16:42:18.76", "EX_POINTS": 150.0, "EX_COUNT": 2, "EX_RULE_ID": "3", "Name": "张嘉译", "EX_NAME": "毛巾", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 2 }, { "E_ID": 6, "VID": 13, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-24T16:42:18.75", "EX_POINTS": 200.0, "EX_COUNT": 4, "EX_RULE_ID": "2", "Name": "张嘉译", "EX_NAME": "拖把", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 1 }, { "E_ID": 5, "VID": 14, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-24T15:02:58.063", "EX_POINTS": 150.0, "EX_COUNT": 2, "EX_RULE_ID": "3", "Name": "王丹", "EX_NAME": "毛巾", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 0 }, { "E_ID": 4, "VID": 14, "Collector_ID": 0, "Worker_ID": 0, "EXCHANGETIME": "2021-03-24T15:02:58.047", "EX_POINTS": 200.0, "EX_COUNT": 4, "EX_RULE_ID": "2", "Name": "王丹", "EX_NAME": "拖把", "Collector_Name": null, "Worker_Name": null, "EX_ISSUCCESS": 0 }] }
      var arrayResponse = []
      response.data.forEach(element => {
        arrayResponse.push([element.Name, element.EX_NAME, element.EX_COUNT, element.EX_POINTS/*, element.EXCHANGETIME*/])
      });
      _self.configTableScrollExchangeInfo.data = arrayResponse;
      _self.configTableScrollExchangeInfo = { ..._self.configTableScrollExchangeInfo }
      // })
      // .catch(function (error) {
      //   console.log(error);
      // });
    },
    //获取数据-轮播表-居民称重
    async getDataTableScrollWeightHistory () {
      const _self = this;
      this.configTableScrollWeightHistory = Object.assign({}, _self.config);
      this.configTableScrollWeightHistory.header = ["居民姓名", "类型", "称重", "时间"]
      // this.configTableScrollWeightHistory.rowNum = 6
      var startTime = formatTime(new Date() - 3600 * 1000 * 24 * 30, 'yyyy-MM-dd');
      var endTime = formatTime(new Date(), 'yyyy-MM-dd');
      var url = 'http://111.160.78.62:5575/GarbagePointsTYApi/AppointmentApp/GetCollectMessagesWithApi'
      // var url = 'http://111.160.78.62:5578/GarbagePointsFJApi/AppointmentApp/GetCollectMessagesAllApi'
      this.$axios.get(url, {
        params: {
          startTime: startTime,
          endTime: endTime,
          ClientNo: 1,
          Level: '行政区',
        }
      })
        .then(function (response) {
          console.log(response.data);
          var arrayResponse = []
          response.data.forEach(element => {
            arrayResponse.push([element.NAME, element.TYPE_NAME, element.WEIGHT, element.WEIGHT_TIME])
          });
          _self.configTableScrollWeightHistory.data = arrayResponse;
          _self.configTableScrollWeightHistory = { ..._self.configTableScrollWeightHistory }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //获取数据-轮播表-各垃圾类型累计投放量排行
    async getDataTableScrollBinAlarm () {
      this.configTableScrollBinAlarm = Object.assign({}, this.config);
      this.configTableScrollBinAlarm.header = ["名称", "时间", "图片"]
      this.configTableScrollBinAlarm.data = [
        ["煤监局宿舍南区", '08-25 09:44', "<img src='https://iconfont.alicdn.com/t/7872c908-036d-4534-bd88-d1f62829abf1.png' style='width: 30px; height: 20px'>"],
        ["锦泽苑", '08-27 07:36', "<img src='https://iconfont.alicdn.com/t/7872c908-036d-4534-bd88-d1f62829abf1.png' style='width: 30px; height: 20px'>"],
        ["德秀小区", '08-30 21:09', "<img src='https://iconfont.alicdn.com/t/7872c908-036d-4534-bd88-d1f62829abf1.png' style='width: 30px; height: 20px'>"],
        ["小区二", '09-06 14:43', "<img src='https://iconfont.alicdn.com/t/7872c908-036d-4534-bd88-d1f62829abf1.png' style='width: 30px; height: 20px'>"],
      ]
    },
    timeFn () {
      setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss');
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000)
    },
    cancelLoading () {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  }
};
</script>

<style lang="scss">
@import '~@/assets/scss/index.scss';
.text-box {
  font-size: 20px;
  text-align: center;
  height: 35px;
}
.item-box {
  margin: 0.1rem;
}
.d-flex {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 18px;
}
</style>